<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/lib/weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/css/jquery-weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/demos/css/demos.css">
    <script src="__FRONT__/dist/lib/jquery-2.1.4.js"></script>
    <script src="__FRONT__/dist/lib/fastclick.js"></script>
    <script src="__FRONT__/dist/js/jquery-weui.js"></script>
</head>
<script>
    $(function () {

        $(".wxpay").click(function () {
            // console.log($('#paytype'));
            $(this).find('i').addClass('weui-icon-success');
            $('.alipay').find('i').removeClass('weui-icon-success');
            $('#paytype').val(1);
            console.log($('#paytype').val());
        });
        $(".alipay").click(function () {
            $(this).find('i').addClass('weui-icon-success');
            $('.wxpay').find('i').removeClass('weui-icon-success');
            $('#paytype').val(0);
            console.log($('#paytype').val());
        });

        $('.sendnum').click(function () {
            var num = $('.number').val();
            if(!num){
                $.toast('输入充值金额','cancel');
                return;
            }
            //前台验证提交金额必须为整数类型

            var type = $('#paytype').val();
            if(type=='1'){
                // alert('微信支付');
            }else{
                $(".alipayimg").show();

            }
        })

    })
</script>
<body>
    <div class="weui-panel">
        <input id="paytype" type="text" value="1" hidden>
            <div style="text-align: center; font-size: 15px" class="weui-panel__hd">
                <i></i>
                充值
            </div>
        <div style="border-bottom: 1px solid #f3f3f3" class="weui-panel__bd wxpay">
            <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="__FRONT__/img/wechat.png">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">微信支付</h4>
                    <p class="weui-media-box__desc">微信客户端</p>
                </div>
                <div class="weui-media-box__hd">
                    <i class="weui-icon-success"></i>
                </div>
            </a>
        </div>
        <div class="weui-panel__bd alipay">
            <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="__FRONT__/img/alipay.png">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">支付宝支付</h4>
                    <p class="weui-media-box__desc">支付宝客户端</p>
                </div>
                <div class="weui-media-box__hd">
                    <i class=""></i>
                </div>
            </a>
        </div>
    </div>
    <!--<div class="weui-flex" style="margin-top: 20px">-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%;" class="weui-btn weui-btn_plain-primary" href="">10元</a>-->
        <!--</div>-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%" class="weui-btn weui-btn_plain-primary" href="">123</a>-->
        <!--</div>-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%" class="weui-btn weui-btn_plain-primary" href="">111</a>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="weui-flex" style="margin-top: 30px">-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%" class="weui-btn weui-btn_primary" href="">10元</a>-->
        <!--</div>-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%" class="weui-btn weui-btn_primary" href="">123</a>-->
        <!--</div>-->
        <!--<div class="weui-flex__item">-->
            <!--<a style="width: 60%" class="weui-btn weui-btn_primary" href="">111</a>-->
        <!--</div>-->
    <!--</div>-->

    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">充值金额</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input number" type="number" pattern="[0-9]*" placeholder="请输入充值金额">
            </div>
        </div>
    </div>
    <a style="width: 50%; margin-top: 20px" href="javascript:;" class="weui-btn weui-btn_primary sendnum">充值</a>
    <div style="display:none;position: absolute; top: 0; " class="alipayimg">
        awdjkajdawkldjawkl
        <img class="aliimg" src="" alt="">
        <div>
            wadada
        </div>
        <div>
            awdawdw
        </div>
    </div>
</body>
</html>